<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>c3轮播图</title>
    <style>
        .box {
            height: 180px;
            width: 320px;
            position: relative;
            overflow: hidden;
            box-shadow: rgba(0, 0, 0, 0.2) 0 0 20px;
            margin: 100px auto;
        }

        .imgbox {
            position: absolute;
            top: 0;
            left: 0;
            height: 180px;
            width: 1921px;
            animation-name: trans;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }

        .imgbox img {
            width: 320px;
            height: 180px;
            float: left;
        }

        @keyframes trans {
            0% {
                margin-left: 0;
            }
            15% {
                margin-left: 0;
            }
            20% {
                margin-left: -320px;
            }
            35% {
                margin-left: -320px;
            }
            40% {
                margin-left: -640px;
            }
            55% {
                margin-left: -640px;
            }
            60% {
                margin-left: -960px;
            }
            75% {
                margin-left: -960px;
            }
            80% {
                margin-left: -1280px;
            }
            95% {
                margin-left: -1280px;
            }
            100% {
                margin-left: -1600px;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="imgbox">
        <img src="image/riven/1.jpg" alt="">
        <img src="image/riven/2.jpg" alt="">
        <img src="image/riven/3.jpg" alt="">
        <img src="image/riven/4.jpg" alt="">
        <img src="image/riven/5.jpg" alt="">
        <img src="image/riven/1.jpg" alt="">
    </div>
</div>
</body>
</html>